﻿<section class="section" id="media">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#media">Media</a>
        </h1>
    </header>
    <div class="row">
        <div class="col-md-24">
            <p><strong>Vertical media</strong> with the image on top and the caption below. It’s the default behavior and the simplest markup.</p>
        <div class="col-md-4">
            <figure class="media">
                <div class="media-img ratio-movie">
                    <a href="#">
                        <img src="http://lorempixel.com/219/300/technics/6" alt="" />
                    </a>
                </div>
                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                    <div class="rating rating-small">
                        <div class="rating-stars">
                            <ul class="rating-stars-background">
                                <li><i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li>
                            </ul>

                            <ul class="rating-stars-value" style="width: 80%">
                                <li><i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="media-price">
                        <s>$1,499.99</s> $1,299.99
                    </div>
                </figcaption>
            </figure>
        </div>
        <div class="col-md-20">
            {{#markdown}}
```xml
<figure class="media">
    <div class="media-img ratio-movie">
        <a href="#">
            <img src="#" alt="" />
        </a>
    </div>
    <figcaption class="media-caption">
        <h4 class="media-header">
            <a href="#">Header</a>
        </h4>
        <div class="media-subheader">
            <a href="#">Subheader</a>
        </div>
        <div class="rating rating-small">
            <div class="rating-stars">
                <ul class="rating-stars-background">
                    <li><i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li>
                </ul>

                <ul class="rating-stars-value" style="width: 80%">
                    <li><i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li>
                </ul>
            </div>
        </div>
        <div class="media-price">
            <s>$1,499.99</s> $1,299.99
        </div>
    </figcaption>
</figure>
```
          {{/markdown}}
      </div>
    </div>
  </div>

    <div class="row">
        <div class="col-md-24">
            <p><strong>Horizontal media</strong> with the image to the left and the caption to the right. It uses the grid to layout the elements accurately.</p>
        </div>
        <div class="col-md-4">
            <figure class="media row">
                <div class="media-img ratio-movie">
                    <a href="">
                        <img src="http://lorempixel.com/219/300/technics/6" alt="" />
                    </a>
                </div>
                <figcaption class="media-caption col-sm-16">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                    <div class="rating rating-small">
                        <div class="rating-stars">
                            <ul class="rating-stars-background">
                                <li><i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li>
                            </ul>

                            <ul class="rating-stars-value" style="width: 80%">
                                <li><i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li><li>
                                <i class="glyph glyph-star"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="media-price">
                        <s>$4.99</s> $3.20
                    </div>
                </figcaption>
            </figure>
        </div> {{!-- col-md-4 close --}}
    <div class="col-md-20">
        {{#markdown}}
```xml
<figure class="media row">
    <div class="media-img ratio-movie">
        <a href="">
            <img src="#" alt="" />
        </a>
    </div>
    <figcaption class="media-caption col-sm-16">
        <h4 class="media-header">
            <a href="">Header</a>
        </h4>
        <div class="media-subheader">
            <a href="">Subheader</a>
        </div>
        <div class="rating rating-small">
            <div class="rating-stars">
                <ul class="rating-stars-background">
                    <li><i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li>
                </ul>

                <ul class="rating-stars-value" style="width: 80%">
                    <li><i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li><li>
                    <i class="glyph glyph-star"></i></li>
                </ul>
            </div>
        </div>
        <div class="media-price">
            <s>$4.99</s> $3.20
        </div>
    </figcaption>
</figure>
```
        {{/markdown}}
    </div>
    </div>
    <div class="row">
        <div class="col-md-24">
            <h2>Media with play glyph</h2>
        </div>
        <div class="col-md-4">
            <figure class="media">
                <div class="media-img media-img-has-play ratio-movie">
                    <a href="#">
                        <img src="http://lorempixel.com/219/300/technics/2" alt="" />
                        <i class="glyph glyph-play"></i>
                    </a>
                </div>
            </figure>
        </div>
    <div class="col-md-20">
        {{#markdown}}
```xml
<figure class="media">
    <div class="media-img media-img-has-play ratio-movie">
        <a href="#">
            <img src="#" alt="" />
            <i class="glyph glyph-play"></i>
        </a>
    </div>
</figure>
```
        {{/markdown}}
    </div>
  </div>

<div class="row">
  <div class="col-xs-24">
    <h2>Media with play glyph and progress bar</h2>
  </div>
  <div class="col-md-4">
    <figure class="media">
        <div class="media-img media-img-has-play ratio-movie">
            <a href="#">
              <img src="http://lorempixel.com/219/300/technics/2" alt="" />
              <i class="glyph glyph-play"></i>
            </a>

              <div class="progress progress-media">
                <div class="progress-bar" role="progressbar"
                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                    style="width: 60%;">
                    <!-- Accessibility -->
                  <span class="sr-only">60%</span>
                </div>
              </div>
        </div>
          <figcaption class="media-caption">
              <h4 class="media-header">
                  <a href="#">Header</a>
              </h4>
              <div class="media-price">
                  Ends in 6 hours
              </div>
          </figcaption>
    </figure>
  </div>
  <div class="col-md-20">
    {{#markdown}}
```xml
<figure class="media">
  <div class="media-img ratio-movie">
    <a href="#">
      <img src="#" alt="" />
      <i class="glyph glyph-play"></i>
    </a>

    <div class="progress progress-media">
      <div class="progress-bar" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
      style="width: 60%;">
      <!-- Accessibility -->
        <span class="sr-only">60%</span>
      </div>
    </div>
  </div>
  <figcaption class="media-caption">
    <h4 class="media-header">
      <a href="#">Header</a>
    </h4>
    <div class="media-price">
      Ends in 6 hours
    </div>
    <div class="rating">
      <div class="rating-stars">
        <ul class="rating-stars-background">
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
        </ul>
        <ul class="rating-stars-value" style="width: 80%">
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
          <li><i class="glyph glyph-star"></i></li>
        </ul>
      </div>
    </div>
  </figcaption>
</figure>
```
    {{/markdown}}
  </div>
</div>
</section>

<div class="row">
  <div class="col-md-24">
    <h2>Media with label</h2>
  </div>

  <div class="col-md-4">
    <figure class="media">
      <div class="media-img media-img-has-label ratio-movie">
        <a href="#">
          <img src="http://lorempixel.com/800/800/technics" alt="" />
        </a>
        <span class="media-img-label">Season 1</span>
        <div class="progress progress-media">
            <div class="progress-bar" role="progressbar"
                aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                style="width: 60%;"></div>
            <!-- Accessibility -->
            <span class="sr-only">60%</span>
        </div>
      </div>
      <figcaption>
        <h4 class="media-header">
          <a href="#">Header</a>
        </h4>
        <div class="media-price">
        Ends in 6 hours
        </div>
      </figcaption>
    </figure>
  </div>

  <div class="col-md-20">
    {{#markdown}}
```xml
<figure class="media">
  <div class="media-img media-img-has-label ratio-movie">
    <a href="#">
      <img src="#" alt="" />
    </a>
    <span class="media-img-label">Season 1</span>
    <div class="progress progress-media">
        <div class="progress-bar" role="progressbar"
            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
            style="width: 60%;"></div>
        <!-- Accessibility -->
        <span class="sr-only">60%</span>
    </div>
  </div>
  <figcaption>
    <h4 class="media-header">
      <a href="#">Header</a>
    </h4>
    <div class="media-price">
    Ends in 6 hours
    </div>
  </figcaption>
</figure>
```
    {{/markdown}}
  </div>
</div>


  <div class="row">
    <div class="col-xs-24">
      <h2 id="media-image-ratio">Forcing image ratio in media elements</h2>
    </div>

    <div class="col-md-6">
      <figure class="media">
        <div class="media-img ratio-movie">
          <a href="#">
            <img src="http://lorempixel.com/219/300/technics/4" alt="" />
          </a>
        </div>
      </figure>
    </div>
    <div class="col-md-6">
      <figure class="media">
        <div class="media-img ratio-1-1">
          <a href="#">
            <img src="http://lorempixel.com/219/300/technics/4" alt="" />
          </a>
        </div>
      </figure>
    </div>
    <div class="col-md-6">
      <figure class="media">
        <div class="media-img ratio-16-9">
          <a href="#">
            <img src="http://lorempixel.com/219/300/technics/4" alt="" />
          </a>
        </div>
      </figure>
    </div>
    <div class="col-md-6">
      <figure class="media">
        <div class="media-img ratio-2-1">
          <a href="#">
            <img src="http://lorempixel.com/219/300/technics/4" alt="" />
          </a>
        </div>
      </figure>
    </div>
  </div>
  <div class="row">
    <div class="col-md-24">
      {{#markdown}}
```xml
<figure class="media">
  <div class="media-img">
      <a href="#">
        <img src="#" alt="" />
      </a>
  </div>
</figure>
```
      {{/markdown}}
    </div>
  </div>
  <div class="row">
    <div class="col-md-24">
      <div class="guidance guidance-usage m-t-xs">
        {{#markdown}}
{{> media-ratio-guidance.md}}
        {{/markdown}}
      </div>
    </div>
  </div>
</section>
